<template>
    <div class="praise">
       <div>
          <tab :line-width="2" class="tabItem">
              <tab-item :selected="selected === index" v-for="(item, index) in listTab" :key="index" @on-item-click="selectTabEvery">{{item}}</tab-item>
          </tab>
       </div>
         <dynamic-list  style="overflow: hidden; height: 100%;"
            v-if="selected === 0"
            ref="dynamicList"
            :style="{height: dynamicHeight}"
            @refresh="_getMyDynamic(0)"
            @scroll="scroll"
            :list="myList"
            :pullDownRefresh = "true"
            :pullUpLoad = "true"
            @onPullingDown="onPullingDown"
            @onPullingUp="onPullingUp">
        </dynamic-list>
        
        <!-- 点赞的游记部分 -->
        <scroll :style="{height: travelScrollHeight}" ref="travelScroll" style="overflow: hidden;"
            :data="praiseTravel"
            :scrollbar="false"
            :pullDownRefresh="true"
            :pullUpLoad="true"
            @pullingDown="onPullingTravelDown"
            @pullingUp="onPullingTravelUp"
            v-if="selected === 1">
        <div>
            <div class="travelTabWrapper" v-for="item in praiseTravel" :key="item.id" @click="handleGoTravelDesc(item.targetId)">
                <div class="travelTabTop">
                    <div class="travelTabTopLeft">
                        <p>{{item.title}}</p>
                    </div>
                    <div class="travelTabTopRight">
                        <p>{{item.starSum > 0 ? item.starSum : 0}}</p>
                        <img slot="icon" :src="favoriteImage" style="width:18px; height:15px;margin-left:8px;margin-top: 5px">
                    </div>
                </div>
                <div class="travelInfo">
                    <div class="travelInfoLeft">
                        <div class="travelInfoLeftOne">
                            <img :src="item.headUrl" alt="" style="width:40px;height:40px;border-radius: 50%;" @click.stop="handlePersonInfo(item.userId)">
                        </div>
                        <div class="travelInfoLeftTwo">
                            <p>{{item.nickname}}</p>
                        </div>
                    </div>
                    <div class="travelInfoRight">
                        <div class="travelInfoRightOne">
                            <p>{{item.browseCount}}浏览</p>
                        </div>
                        <div class="travelInfoRightTwo">
                            <p>{{item.commentCount > 0 ? item.commentCount : 0 }}评论</p>
                        </div>
                    </div>
                </div>
                <div class="travelImageWrapper">
                    <div class="travelImage" :style="{backgroundImage:`url(${item.firstImg + '-meitu1'})`}">
                    </div>
                </div>
            </div>
            <not-data v-if="praiseTravel.length === 0" tip="空空如也~<br>点击刷新" @handleClick="getPraiseTravel(true)"></not-data>
        </div>
      </scroll>

        <!-- 点赞攻略部分 -->
        <scroll :style="{height: strategyScrollHeight}" ref="strategyScroll" style="overflow: hidden;"
            :data="praiseStrategy"
            :scrollbar="false"
            :pullDownRefresh="true"
            :pullUpLoad="true"
            @pullingDown="onPullingStrategyDown"
            @pullingUp="onPullingStrategyUp"
            v-if="selected === 2">
            <div>
                <div class="strategyWrapper" v-for="item in praiseStrategy" :key="item.id" @click="handleGoTravelDesc(item.targetId)">
                    <div class="imgWrapper" :style="{backgroundImage:`url(${item.firstImg + '-meitu1'})`}">
                    </div>
                    <div class="textWrapper">
                        <p>{{item.title}}</p>
                    </div>
                    <div class="positionWrapper">
                        <p>{{item.addressName}}</p>
                    </div>
                    <div class="bottomStrategy">
                        <div class="countWrapper">
                            <p>{{item.browseCount}}次浏览</p>
                        </div>
                        <div class="timeWrapper">
                            <p>{{item.publishTime}}</p>
                        </div>
                    </div>
                </div>
                <not-data v-if="praiseStrategy.length === 0" tip="空空如也~<br>点击刷新" @handleClick="getPraiseStrategy(true)"></not-data>
                <div style="height: 30px; width: 100%">
                </div>
            </div>
        </scroll>
    </div>
</template>

<script>
import VHeader from '@/components/v-header/v-header'
import axios from '@/api/axiosApi'
import { personifyTime } from '@/assets/js/utils'
import defaultAvatar from '@/assets/img/default_avatar.png'
import { localUser } from '@/assets/js/local'
import { QINIU_PREFIX } from '@/api/config'
import { Tab, TabItem } from 'vux'
import { mapGetters, mapMutations } from 'vuex'
import notData from '@/components/not-data/not-data'
import Scroll from '@/components/scroll/scroll'
import favoriteImage from '@/assets/img/myhome/favorite.png'
import dynamicList from '@/pages/meiTu/dynamicList/dynamicList'
import { isIOS, isIphoneX } from '@/assets/js/brower'

export default {
  data () {
    return {
      myList: [],
      listTab: [this.$t('tab.scenicOrHotel'), this.$t('tab.travels'), this.$t('tab.strategy')],
      praiseTravel: [],
      praiseStrategy: [],
      favoriteImage: favoriteImage,
      ifMe: true,
      dynamicHeight: '500px',
      travelScrollHeight: '500px',
      strategyScrollHeight: '500px'
    }
  },
  mounted () {
    // this.$refs.dynamicList.$el.style.height = (window.innerHeight - this.$refs.header.$el.offsetHeight - 44) + 'px'
    this.dynamicHeight = (window.innerHeight - 104) + 'px'
  },
  computed: {
    ...mapGetters({
      selected: 'praiseTab'
    })
  },
  created () {
    this.pageStartNum = 999
    this.pageEndNum = 1   // 预留位置，以后做显示数量控制
    this.pageSize = 5
    this.praiseTravelNum = 1
    this.praiseTravelSize = 10
    this.praiseStrategyNum = 1
    this.praiseStrategySize = 10
    this.paddingTop = 24
    if (isIphoneX()) {
      this.paddingTop = 34
    }
    this.travelScrollHeight = window.innerHeight - 84 - this.paddingTop + 'px'
    this.strategyScrollHeight = window.innerHeight - 84 - this.paddingTop + 'px'
    this._getMyDynamic(0)
    this.getPraiseTravel(true)
    this.getPraiseStrategy(true)
  },
  methods: {
    ...mapMutations({
      setPraiseTab: 'SET_PRAISE_TAB'
    }),
    _getMyDynamic (pageNum) {
      const userId = localUser.get('id')
      if (userId == null) {
        this.$vux.toast.text(this.$t('toast.mustLogin'), 'middle')
        return
      }
      const _self = this
      axios.get(_self, '/v1/dynamic', {
        userId,
        curUserId: userId,
        pageSize: _self.pageSize,
        pageNum: pageNum,
        starType: 1
      }, (data) => {
        if (data.length === 0) {
          if (pageNum > 0) {
            if (_self.$refs.dynamicList) {
              _self.$refs.dynamicList.$refs.scroll.hiddenPullUpLoad()
            }
          } else {
            _self.pageStartNum = 0
            _self.$refs.dynamicList.$refs.scroll.hiddenPullDown()
          }
          return
        }
        let temp = []
        data.forEach(item => {
          let tmpHeadUrl = defaultAvatar
          if (item.headUrl) {
            if (item.headUrl.indexOf(QINIU_PREFIX) > -1) {
              tmpHeadUrl = item.headUrl + '-bheader'
            } else {
              tmpHeadUrl = item.headUrl
            }
          }
          temp.push({
            user: {
              id: item.publisher,
              nickname: item.nickname,
              headUrl: tmpHeadUrl,
              signature: item.signature || '',
              local: parseInt(item.local)
            },
            product: {
              id: item.productId,
              thumblUrl: item.thumbUrl,
              name: item.name,
              address: item.address,
              type: item.type
            },
            dynamic: {
              id: item.id,
              content: item.content,
              atlas: item.atlas ? item.atlas.split(';') : '',
              publishAddress: item.publishAddress,
              publishTime: personifyTime(item.publishTime),
              tags: item.tagNames ? item.tagNames.split(';') : '',
              tagIds: item.tagIds ? item.tagIds.split(';') : '',
              latitude: item.publishLatitude,
              longitude: item.publishLongitude
            },
            other: {
              collectionType: item.collection !== 0,
              starType: item.star !== 0,
              collectionNum: item.collectionSum,
              starNum: item.starSum,
              // shareNum: item.shareCount,
              commentNum: item.commentCount,
              followStatus: item.follower === 'NO' ? 0 : 1
            }
          })
        })
        // 第一次加载
        if (pageNum === 0 && _self.pageStartNum === 999) {
          _self.myList = temp
          _self.pageStartNum = 0
        }
        // 上拉刷新
        if (pageNum <= _self.pageStartNum) {
          _self.myList = temp
          _self.pageStartNum = pageNum
          _self.pageEndNum = 1
        }
        // 下拉加载
        if (pageNum > _self.pageEndNum) {
          _self.myList = _self.myList.concat(temp)
          _self.pageEndNum = pageNum
        }
      })
    },
    scroll (position, directionY) {
      this.$emit('scroll', position, directionY)
    },
    onPullingUp () {
      this._getMyDynamic(this.pageEndNum + 1)
    },
    onPullingDown () {
      let pageSize = 0
      if (this.pageStartNum > 0) {
        pageSize = this.pageStartNum - 1
      }
      this._getMyDynamic(pageSize)
    },
    selectTabEvery (value) {
      this.setPraiseTab(value)
    },
    // 获取我所点赞的游记和攻略
    getPraiseTravel (isFirst) {
      axios.get(this, '/v1/messageRecords/' + localUser.get('id'), {type: 2, starType: 1, pageNum: this.praiseTravelNum, pageSize: this.praiseTravelSize}, (data) => {
        if (data.length > 0) {
          if (localUser.get('id') === data[0].userId) {
            this.ifMe = true
          }
        }
        if (isFirst) {
          this.praiseTravel = data
          return
        }
        if (data.length === 0) {
          if (this.praiseTravelNum === 1) {
            this.$refs.travelScroll.hiddenPullDown()
          } else {
            this.praiseTravelNum--
            this.$refs.travelScroll.hiddenPullUpLoad()
          }
        } else {
          if (this.praiseTravelNum > 1) {
            this.praiseTravel = this.praiseTravel.concat(data)
          } else {
            this.praiseTravel = data
          }
        }
      })
    },
    getPraiseStrategy (isFirst) {
      axios.get(this, '/v1/messageRecords/' + localUser.get('id'), {type: 3, starType: 1, pageNum: this.praiseStrategyNum, pageSize: this.praiseStrategySize}, (data) => {
        if (isFirst) {
          this.praiseStrategy = data
          return
        }
        if (data.length === 0) {
          if (this.praiseStrategyNum === 1 && this.$refs.strategyScroll) {
            this.$refs.strategyScroll.hiddenPullDown()
          } else {
            this.praiseStrategyNum--
            if (this.$refs.strategyScroll) this.$refs.strategyScroll.hiddenPullUpLoad()
          }
        } else {
          if (this.praiseStrategyNum > 1) {
            this.praiseStrategy = this.praiseStrategy.concat(data)
          } else {
            this.praiseStrategy = data
          }
        }
      })
    },
    handleGoTravelDesc (id) {
      this.$router.push('/address/playStrategy/' + id)
    },
    handlePersonInfo (userId) {
      this.$router.push('/user/archives/' + userId)
    },
    onPullingTravelUp () {
      this.praiseTravelNum++
      this.getPraiseTravel()
    },
    onPullingTravelDown () {
      this.praiseTravelNum = 1
      this.getPraiseTravel()
    },
    onPullingStrategyDown () {
      this.praiseStrategyNum = 1
      this.getPraiseStrategy()
    },
    onPullingStrategyUp () {
      this.praiseStrategyNum++
      this.getPraiseStrategy()
    }
  },
  components: {
    VHeader,
    dynamicList,
    Tab,
    TabItem,
    Scroll,
    localUser,
    notData,
    isIOS,
    isIphoneX
  }
}
</script>
<style lang="stylus" scoped>
@import '~@/assets/css/variable.styl'
.praise {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: $color-background;
  z-index: 101;
  height:100%;
}

.dynamic-list {
    padding: 12px 9px;
}

.travelTabWrapper {
    margin-bottom 10px
    box-shadow: 0px 0px 15px #C5C5C5;
    background-color white
    &:last-child {
      margin-bottom: 0
    }
    .travelTabTop {
        padding-top 15px
        padding-left 15px
        padding-right 15px
        padding-bottom 10px
        display: flex
        justify-content space-between
        .travelTabTopLeft {
            p {
                font-size $font-size-title
                font-weight bold
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
                overflow: hidden;
            }
        }
        .travelTabTopRight {
            display flex
            img {
                margin-top -4px
            }
        }
    }
    .travelInfo {
        padding-left 15px
        padding-right 15px
        padding-bottom 5px
        display flex
        justify-content space-between
        border-bottom-style solid
        border-width:1px
        border-color: #E4E4E4
        .travelInfoLeft {
            display flex
            .travelInfoLeftOne {

            }
            .travelInfoLeftTwo {
                p {
                    font-size $font-size-small
                    margin-left 10px
                    margin-top 10px
                }
            }
        }
        .travelInfoRight {
            display flex
            .travelInfoRightOne {
                p {
                    font-size $font-size-small
                    margin-top 10px
                }
            }
            .travelInfoRightTwo {
                margin-left: 10px
                p {
                    font-size $font-size-small
                    margin-top 10px
                }
            }
        }
    }
    .travelImageWrapper {
        padding-top 10px
        padding-left 15px
        padding-right 15px
        padding-bottom 10px
        .travelImage {
        width: 100%
        height 200px
        background-size: cover
        background-repeat: no-repeat
        background-position 50% 50%
      }
    }
  }

  .strategyWrapper {
      margin-bottom: 10px
      background-color: white
      padding-top 15px
      padding-left 15px
      padding-right 15px
      padding-bottom 10px
      box-shadow: 0px 0px 15px #C5C5C5
      &:last-child {
        margin-bottom: 0
      }
      .textWrapper {
          margin-top 8px
          font-weight bold
          p {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
          }
      }
      .imgWrapper {
        width: 100%
        height 200px
        background-size: cover
        background-repeat: no-repeat
        background-position 50% 50%
      }
      .positionWrapper {
          p {
            font-size: $font-size-small
          }
      }
      .bottomStrategy {
          margin-top 5px
          display flex
          justify-content: space-between
          .countWrapper {
              p {
                font-size: $font-size-small
              }
          }
          .timeWrapper {
              p {
                font-size: $font-size-small
              }
          }
      }
  }
</style>
